<template>
	<view class="home">
		<u-navbar title="工单" placeholder left-icon-size="0">
			<template #right>
				<u-text text="创建工单" color="#0c9bf4" size="32rpx" @click="handleRoute('/pages/index/newOrder')"></u-text>
			</template>
		</u-navbar>
		<view class="search-input u-flex-y-center u-flex-between">
			<u-input placeholder="搜索你想要的" v-model="params.keywords" border="none"></u-input>
			<u-image src="/static/images/icon_ss.png" width="76rpx" @click="_orderList(1)" height="48rpx"></u-image>
		</view>
		<component :is="infoItem" :list='list' @orderList="_orderList(1)"></component>
		<view class="pop-btn" @click="handleRoute('/pages/index/maintenance')">
			<u-image src="/static/images/icon_cha.png" width="120rpx" height="120rpx"></u-image>
		</view>
	</view>
	<up-tabbar :value="'index'" activeColor="#0C9BF4" inactiveColor="#BFBFBF">
		<up-tabbar-item text="首页" icon="/static/images/icon_gd_y.png" name="index"></up-tabbar-item>
		<up-tabbar-item text="记账" icon="/static/images/icon_bill.png"
			@click="handleClick('/pages/bill/bill')"></up-tabbar-item>
		<up-tabbar-item v-if="userInfo.group_id == 1" text="统计" icon="/static/images/icon_tj.png"
			@click="handleClick('/pages/statistics/statistics')"></up-tabbar-item>
		<up-tabbar-item text="我的" icon="/static/images/icon_wd.png"
			@click="handleClick('/pages/mine/mine')"></up-tabbar-item>
	</up-tabbar>
</template>

<script setup>
	import infoItem from '@/components/info-item/info-item.vue'
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import {
		orderList
	} from '../../config/api';
	import { getCache } from '../../util/util';
	const list = ref([])
	const params = ref({
		page: 1,
		keywords: ''
	})
	const userInfo = ref({})
	onShow(() => {
		uni.hideTabBar()
		userInfo.value = getCache('userInfo')
		_orderList(1)
	})
	onReachBottom(() => {
		params.value.page++
		_orderList(params.value.page)
	})
	const handleClick = (page) => {
		uni.switchTab({
			url: page
		})
	}
	const _orderList = (page) => {
		if (page) params.value.page = page
		orderList(params.value).then(res => {
			if (params.value.page == 1) list.value = res.data.data
			else list.value = [...list.value, ...res.data.data]
		})
	}
	const handleRoute = (page) => {
		uni.$u.route(page)
	}
</script>

<style scoped lang="scss">
	.home {
		padding: 20rpx 26rpx;
		min-height: 100vh;
		background-color: #FAFAFA;
	}

	.search-input {
		padding: 12rpx 20rpx;
		background: #fff;
		border-radius: 12rpx;
	}

	.pop-btn {
		position: fixed;
		right: 22rpx;
		bottom: 20%;
	}
</style>